<template>
	<view class="g-im-container">
		<view class="g-im-body">
			<view class="g-im-left"></view>
			<view class="g-im-right">
				<view class="g-im-top"></view>
				<scroll-view :scroll-into-view="scrollInto" scroll-y scroll-with-animation 
					:style="{height:h+'px',width:'100%'}" style="background-color:antiquewhite;">
					<view class="g-im-main">
						<view v-for="(item,index) in list" :key="index" :id="'scrollId' + index" :class="item.from == client_id ? 'g-im-chart-body-right':'g-im-chart-body'">
							<view class="g-im-chart-header"></view>
							<view class="g-im-chart-content">
						
								<view class="g-im-chart-text" v-html="item.text"></view>
							</view>
						</view>
					</view>
					
				</scroll-view>
				<view class="g-im-bottom">
					<input v-model="msgInput" class="g-im-chart-input" focus placeholder="请输入..." />
					<uni-icons type="paperplane" size="26px" style="margin-left: 15px;cursor: pointer;"
						@click="sendMsg"></uni-icons>
					<uni-icons type="folder-add" size="26px" style="margin-left: 15px;cursor: pointer;"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'gt-im',
		data() {
			return {
				list: [],
				msgInput: '',
				h: '',
				scrollInto: '',
				client_id: '',
			}
		},
		props: {

		},
		created() {
			let _this = this;
			this.$websocket.init({
				onMsg(r) {
					console.log(r);
					if(r.client_id){
						_this.client_id = r.client_id;
					}else{
						_this.list.push(r);
						_this.scrollInto = 'scrollId' + (_this.list.length - 1);
					}
					
				}
			});
			let systemInfo = uni.getSystemInfoSync();
			let h = systemInfo.safeArea.height;
			h = h >= 800 ? 700 : h - 100;
			this.h = h;
			console.log(h)
		},
		methods: {
			sendMsg() {
				let data = {
					from:this.client_id,
					text: this.msgInput
				};
				this.list.push(data);
				this.scrollInto = 'scrollId' + (this.list.length - 1);
				this.$websocket.send(data);
				this.msgInput = '';
			}
		}
	}
</script>

<style>
	.g-im-chart-text {
		background-color: #95EC69;
		border-radius: 5px;
		padding: 5px 10px;

	}

	.g-im-chart-content {
		max-width: 61.8%;
		margin: 0 10px;
	}

	.g-im-chart-header {
		width: 38px;
		height: 38px;
		background-color: #fff;
		border-radius: 3px;
	}

	.g-im-chart-body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 15px 15px 15px;
		box-sizing: border-box;
	}
	.g-im-chart-body-right {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		padding: 0 15px 15px 15px;
	}

	.g-im-chart-input {
		height: 38px;
		line-height: 38px;
		flex-grow: 1;
		width: 0;
	}

	.g-im-main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content:flex-end;
		background-color: #fafafa;
	}

	.g-im-bottom {
		width: 100%;
		height: 50px;
		padding: 0 15px;
		background-color: #fff;
		border-top: 1px solid #eee;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.g-im-top {
		width: 100%;
		height: 50px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.g-im-right {
		flex-grow: 1;
		width: 0;
		/* background-color: #eee; */
		display: flex;
		flex-direction: column;
	}

	.g-im-left {
		width: 200px;
		// background-color: #aaa;
		border-right: 1px solid #eee;
	}

	.g-im-body {
		width: 100vw;
		max-width: 1000px;
		height: 100vh;
		max-height: 800px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		border: 1px solid #eee;
		box-shadow: 1px 5px 15px #ccc;
	}

	.g-im-container {
		// background-color: #fafafa;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
</style>